<template>
  <div class="app-container">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="factor" style="width: 100%; background: black; height:300px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { echarts, Treeselect },
  props: ["message"], // 声明一个自定义的属性
  data() {
    return {
      echartData: []
    };
  },
  watch: {
    message: {
      immediate: true,
      handler(val) {
        //  console.log(val,'差点撒旦阿萨=============');
        this.echartData = val;
        //  val.forEach((item) => {
        //   this.getDataNum.push(Number(item.ytdUvNew))
        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
        // })
        this.$nextTick(() => {
          //这里需要重新加载渲染
          this.drawLine();
        });
      }
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("factor"));

      var data = this.echartData;
      // [
      //   { code: "张一山", stock: "aaa", fundPost: "21" },
      //   { code: "张二山", stock: "bbb", fundPost: "20" },
      //   { code: "张三山", stock: "ccc", fundPost: "19" },
      //   { code: "张四山", stock: "sss", fundPost: "18" },
      //   { code: "张五山", stock: "eee", fundPost: "17" },
      //   { code: "张六山", stock: "fff", fundPost: "16" },
      //   { code: "张七山", stock: "ggg", fundPost: "15" },
      //   { code: "张八山", stock: "ll", fundPost: "17" },
      //   { code: "张九山", stock: "ii", fundPost: "16" },
      //   { code: "张十山", stock: "ppp", fundPost: "15" }
      // ];
      function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
          if (arr[i] == dst) {
            return i;
          }
        }
        return false;
      }

      var attackSourcesColor = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#EB3B5A" },
          { offset: 1, color: "#FE9C5A" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#FA8231" },
          { offset: 1, color: "#FFD14C" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#F7B731" },
          { offset: 1, color: "#FFEE96" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#395CFE" },
          { offset: 1, color: "#2EC7CF" }
        ])
      ];
      var attackSourcesColor1 = [
        "#EB3B5A",
        "#FA8231",
        "#F7B731",
        "#3860FC",
        "#1089E7",
        "#F57474",
        "#56D0E3",
        "#1089E7",
        "#F57474",
        "#1089E7",
        "#F57474",
        "#F57474"
      ];
      var attaData = [];
      var attaName = [];
      var topName = [];
      data.forEach((it, index) => {
        attaData[index] = parseFloat(it.value).toFixed(2);
        attaName[index] = it.value;
        topName[index] = it.name;
      });
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < attaData.length; i++) {
        salvProMax.push(attaData[0]);
      }
      function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach(function(item, i) {
          let itemStyle = {
            color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
          };
          sss.push({
            value: item,
            itemStyle: itemStyle
          });
        });
        return sss;
      }

      var option = {
        backgroundColor: "#050616",
        tooltip: {
          show: false,
          backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
          textStyle: {
            fontSize: 16
          }
        },
        // color: ["#F7B731"],
        // legend: {
        //   pageIconSize: [12, 12],
        //   itemWidth: 20,
        //   itemHeight: 10,
        //   textStyle: {
        //     //图例文字的样式
        //     fontSize: 10,
        //     color: "#fff"
        //   },
        //   selectedMode: false,
        //   data: ["个人所得(亿元)"]
        // },
        grid: {
          left: "-14%",
          right: "0%",
          width: "110%",
          bottom: "0%",
          top: "8%",
          containLabel: true
        },
        xAxis: {
          type: "value",

          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              label: {
                show: true
                //margin: 30
              }
            },
            pdaaing: [5, 0, 0, 0],
            postion: "right",
            data: attaName,
            axisLabel: {
              margin: 60,
              fontSize: 10,
              align: "left",
              padding: [0, 0, 0, 0],
              color: "#000",
              rich: {
                nt1: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[0],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  lineHeight: "5",
                  padding: [0, 1, 2, 1]
                  // padding:[0,0,2,0],
                },
                nt2: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[1],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1]
                },
                nt3: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[2],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1]
                },
                nt: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[3],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  lineHeight: 3,
                  borderRadius: 100,
                  padding: [0, 1, 2, 1],
                  lineHeight: 5
                }
              },
              formatter: function(value, index) {
                index = contains(attaName, value) + 1;
                if (index - 1 < 3) {
                  return ["{nt" + index + "|" + index + "}"].join("\n");
                } else {
                  return ["{nt|" + index + "}"].join("\n");
                }
              }
            }
          },
          {
            type: "category",
            position: "right",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              margin: 10,
              padding: [0, 20, 0, 0],
              textStyle: {
                color: "#fff",
                fontSize: "10"
              }
            },
            data: attackSourcesDataFmt(attaName)
          },
          {
            //名称
            type: "category",
            offset: 15,
            position: "left",
            axisLabel: {
              color: `#fff`,
              fontSize: 10
            },
            axisLine: {
              show: false
            },
            inverse: true,
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 25,
              interval: 0,
              color: ["#fff"],
              align: "left",
              verticalAlign: "bottom",
              lineHeight: 0,
              fontSize: 13
            },
            data: topName
          }
        ],
        series: [
          {
            zlevel: 1,
            name: "",
            type: "bar",
            barWidth: "15px",
            animationDuration: 1500,
            data: attackSourcesDataFmt(attaData),
            align: "center",
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: false,
              fontSize: 10,
              color: "#fff",
              textBorderWidth: 2,
              padding: [2, 0, 0, 0]
            }
          },
          {
            name: "",
            type: "bar",
            barWidth: 15,
            barGap: "-100%",
            margin: "20",
            data: salvProMax,
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: "#fff"
            },
            itemStyle: {
              normal: {
                color: "#05325F",
                //width:"100%",
                fontSize: 10,
                barBorderRadius: 30
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px !important;
  min-height: calc(0vh - 0px) !important;
  margin: 0px 0px 0px 35px;
}
</style>
